import React, { Component } from 'react'
import './Transitin1.css'
import {CSSTransition} from 'react-transition-group'

export default class Transition1 extends Component {
  constructor() {
    super();
    this.state = {
      isShow: true
    }
  }
  render() {
    return (
      <div>
        <button onClick={()=>this.setState({isShow: !this.state.isShow})}>toggle</button>
        {/* in属性：控制显示隐藏的变量名  */}
        {/* timeout属性：动画执行时间  */}
        {/* classNames属性：css的前缀  */}
        {/* unmountOnExit：退出时卸载元素 */}
        <CSSTransition
          in={this.state.isShow}
          timeout={1000}
          classNames="my-node"
          unmountOnExit
        >
          <div className="div1"></div>
        </CSSTransition>
      </div>
    )
  }
}
